<template>
  <div class="leave-wrap">
    <div class="search-box">
      <div class="key-box">
        <img src="../search.png" class="pic1" onclick="return false"/>
        <input class="key" placeholder="请输入身份证号" v-model="check" @blur="inputBlur" maxlength="18" @input="checkCert"/>
        <img src="../close.png" class="pic2" @click="clearData" onclick="return false" v-show="showIcon"/>
      </div>
      <div class="search-btn" @click="queryLeaveEmploy">搜索</div>
    </div>

    <div class="leave-box" v-if="showData == 1 && userList.length > 0" v-for="(item,index) in userList" :key="index"
         @click="queryLendRecord(item.identityNo,item.userId)">
      <img :src="item.userUrl" v-if="item.userUrl" class="pic4" onclick="return false"/>
      <div class="pic3" v-else></div>
      <span class="name">{{item.userName}}</span>
      <span class="num">{{item.identityNo}}</span>
      <img src="../in.png" class="pic5" onclick="return false"/>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <img src="../empty.png" class="empty" onclick="return false"/>
        <div class="tip">{{errorMsg}}~</div>
      </div>
    </div>

    <backpage @backPage="backPage"></backpage>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import {formatDate, removeSessionStore, toDecimal} from "../../../config/util"
  import backpage from "../../../components/backpage"

  export default {
    data() {
      return {
        check: "",
        showData: 0,
        userSign: "",
        userList: [],
        errorMsg: "",
        userId: "",
        showIcon: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      inputBlur() {
        window.scrollTo(0, 0);
      },
      checkCertNo() {
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/;
        if (this.check == "" || this.check == null) {
          this.$vux.toast.text("请输入身份证号", "middle");
          return;
        } else if (!reg.test(this.check)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        return true;
      },
      queryLeaveEmploy() {//查询是否绑定工资卡
        if (this.checkCertNo()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/get_user_bank_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          this.axios.get(baseUrl + "/resident/get_user_bank_list?sgin=" + this.userSign + "&userCardNumber=" + this.check + "&auth=" + signature + "&timestamp=" + time).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0 && resultObj.data.length > 0) {
              this.userList = resultObj.data;
              this.showData = 1;
            } else {
              this.errorMsg = resultObj.msg;
              this.showData = 2;
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      queryLendRecord(certNo, userId) {//查询是否有借支记录
        removeSessionStore("withholdList");
        removeSessionStore("subsidyList");
        removeSessionStore("leave");
        removeSessionStore("leaveEndTime");

        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_lend_money_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_lend_money_list?sgin=" + this.userSign + "&userCardNumber=" + certNo + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data.length > 0) {
            let money = toDecimal(resultObj.data[0].lendMoney);
            let name = resultObj.data[0].userName;
            let userUrl = resultObj.data[0].userUrl;
            let time = formatDate(new Date(resultObj.data[0].time), "yyyy-MM-dd");
            let number = resultObj.data[0].userCardNumber;
            let id = resultObj.data[0].id;
            this.$router.push({
              path: "lendrecord",
              query: {
                "money": money,
                "name": name,
                "time": time,
                "number": number,
                "userUrl": userUrl,
                "id": id,
                "userId": userId
              }
            });
          } else {
            this.$router.push({path: "leavebill", query: {"userId": userId}});
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      clearData() {
        this.check = "";
        this.showIcon = false;
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      },
      checkCert() {//校验身份证
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9Xx])$/; //身份证
        if (this.check == '') {
          this.showIcon = false;
        } else if (!reg.test(this.check)) {
          this.showIcon = true;
        }
      }
    },
    components: {
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .leave-wrap
    wh(100%, 100%)
    overflow: hidden
    background: rgba(242, 242, 242, 1)
    .search-box
      display flex
      align-items: center
      wh(100%, 1.2rem)
      background: $color
      .key-box
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(82.13%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        flex: 1
        .pic1
          margin-left: 0.253rem
          margin-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .key
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(51, 51, 51, 1))
        .pic2
          margin-left: auto
          wh(0.48rem, 0.48rem)
          margin-right: 0.16rem
      .search-btn
        margin-left: 0.307rem
        margin-right: 0.32rem
        size-color(0.4rem, rgba(255, 255, 255, 1))
    .leave-box
      display: flex
      align-items: center
      wh(100%, 1.6rem)
      background: #FFF
      .pic3
        margin-left: 0.32rem
        margin-right: 0.347rem
        wh(1.067rem, 1.067rem)
        background: rgba(242, 242, 242, 1)
        border-radius: 50%
      .pic4
        margin-left: 0.32rem
        margin-right: 0.347rem
        wh(1.067rem, 1.067rem)
        border-radius: 50%
      .pic5
        margin-left: auto
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .name
        width: 2.3rem
        size-color(0.453rem, rgba(51, 51, 51, 1))
        ellipsis()
      .num
        size-color(0.373rem, rgba(102, 102, 102, 1))
    .empty-wrap
      fj(center, center)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      wh(100%, auto)
      .empty-box
        display: flex
        flex-direction: column
        align-items: center
        wh(80%, auto)
        .empty
          wh(4.773rem, 4.773rem)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
</style>
